<template>
  <view class="page-container">
    <view class="image-module">
      <view class="title">接口</view>

      <view class="download-section">
        <view class="section-title">网络图片下载</view>
        <button @click="downloadImage" class="btn download-btn">下载并显示网络图片</button>
        <view class="progress" v-if="showProgress">下载进度：{{ progress }}%</view>
        <image :src="downloadImagePath" mode="widthFix" class="preview-img" v-if="downloadImagePath"></image>
      </view>

      <view class="local-section">
        <view class="section-title">本地图片选择</view>
        <view class="image-container">
          <image :src="localImageUrl" mode="aspectFill" class="round-image" v-if="localImageUrl" @click="chooseLocalImage"></image>
        </view>
        <button @click="chooseLocalImage" class="btn local-btn">选择本地图片</button>
        <button @click="previewLocalImage" class="btn local-btn" :disabled="!localImageUrl">预览本地图片</button>
        <button @click="getLocalImageInfo" class="btn local-btn" :disabled="!localImageUrl">获取图片信息</button>
      </view>
    </view>

    <view class="weather-container">
      <h3 class="module-title">天气预报</h3>
      <view v-if="tomorrowWeather" class="weather-card">
        <p>日期：{{ tomorrowWeather.date }}</p>
        <p>星期：{{ tomorrowWeather.week }}</p>
        <p>温度：{{ tomorrowWeather.high }} / {{ tomorrowWeather.low }}</p>
      </view>
      <view v-else class="loading">加载中...</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      netImageURL: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
      downloadImagePath: '',
      progress: 0,
      showProgress: false,
      localImageUrl: '/static/logo.png',
      tomorrowWeather: null
    };
  },
  onLoad() {
    this.getTomorrowWeather();
  },
  methods: {
    downloadImage() {
      this.showProgress = true;
      this.progress = 0;

      const downloadTask = uni.downloadFile({
        url: this.netImageURL,
        success: (res) => {
          if (res.statusCode === 200) {
            console.log('网络图片下载成功，临时路径：', res.tempFilePath);
            this.downloadImagePath = res.tempFilePath;
            uni.previewImage({ urls: [res.tempFilePath] });
          }
        },
        fail: (err) => {
          console.error('网络图片下载失败：', err);
          uni.showToast({ title: '网络图片下载失败', icon: 'none' });
          this.showProgress = false;
        },
        complete: () => {
          this.showProgress = false;
        }
      });
      downloadTask.onProgressUpdate((res) => {
        this.progress = res.progress;
        console.log(`下载进度：${res.progress}%，已下载：${res.totalBytesWritten}字节，总大小：${res.totalBytesExpectedToWrite}字节`);
      });
    },
    chooseLocalImage() {
      uni.chooseImage({
        count: 2,
        sourceType: ['album'],
        success: (res) => {
          this.localImageUrl = res.tempFilePaths[0];
          console.log('选择本地图片路径：', res.tempFilePaths[0]);
        }
      });
    },
    previewLocalImage() {
      uni.previewImage({
        urls: [this.localImageUrl],
        current: this.localImageUrl
      });
    },
    getLocalImageInfo() {
      uni.getImageInfo({
        src: this.localImageUrl,
        success: (info) => {
          console.log('本地图片信息：', info);
          uni.showModal({
            title: '图片信息',
            content: `宽度：${info.width}px\n高度：${info.height}px\n格式：${info.type}\n是否原图：${info.original}`
          });
        }
      });
    },

    getTomorrowWeather() {
      uni.request({
        url: 'https://t.weather.sojson.com/api/weather/city/101230501',
        success: (res) => {
          const weatherData = res.data.data.forecast[1];
          this.tomorrowWeather = {
            date: weatherData.ymd,
            week: weatherData.week,
            high: weatherData.high,
            low: weatherData.low
          };
        },
        fail: (err) => {
          console.error('获取天气预报失败：', err);
          uni.showToast({ title: '天气加载失败', icon: 'none' });
        }
      });
    }
  }
};
</script>

<style scoped>
.page-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.image-module {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
  text-align: center;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #444;
  margin: 20rpx 0;
  padding-bottom: 10rpx;
  border-bottom: 1rpx solid #eee;
}
.download-section, .local-section {
  margin-bottom: 40rpx;
}

.preview-img {
  width: 100%;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
.progress {
  margin-top: 20rpx;
  color: #333;
  font-size: 28rpx;
  text-align: center;
}

.image-container {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 30rpx;
  border: 2rpx solid #eee;
}
.round-image {
  width: 100%;
  height: 100%;
}

.btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  color: #fff;
}
.download-btn {
  background-color: #4cd964;
}
.local-btn {
  background-color: #007aff;
}
.btn[disabled] {
  background-color: #ccc;
  color: #fff;
}

.weather-container {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.module-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
  color: #333;
}
.weather-card {
  line-height: 50rpx;
  font-size: 28rpx;
  color: #666;
}
.loading {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  padding: 20rpx 0;
}
</style>